<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 日历</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="css/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
    <link href="css/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInDown">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>每日计划</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="calendar.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="calendar.html#">选项1</a>
                                </li>
                                <li><a href="calendar.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id='external-events'>
                            <p>一个亿的小目标</p>
                            <!-- <div class='external-event navy-bg'>确定活动目标</div>
                            <div class='external-event navy-bg'>各部门职责及分工</div>
                            <div class='external-event navy-bg'>案例分享</div>
                            <div class='external-event navy-bg'>xxx</div>
                            <p class="m-t">
                                <input type='checkbox' id='drop-remove' class="i-checks" checked />
                                <label for='drop-remove'>移动后删除</label>
                            </p> -->
                        </div>
                    </div>
                </div>
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <h2>添加任务</h2>
                        <div class="input-group">
                            <input type="text" placeholder="请输入目标" class="input-sm form-control" id="plane_txt"
                                maxlength="25" minlength="1"> <span class="input-group-btn">
                                <button type="button" class="btn btn-sm btn-primary" onclick="add_plane()"> 添加</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>计划日历 </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="calendar.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="calendar.html#">选项1</a>
                                </li>
                                <li><a href="calendar.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="edit-plane" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header ">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                            class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-bell modal-icon"></i>
                    <h5 class="modal-title">修改计划</h5>
                    <small class="font-bold">
                </div>
                <div class="modal-body">
                    <div class="form-group"><label>开始时间</label> <input type="date" id="start-time-ipt" placeholder="请输入开始时间"
                            class="form-control"></div>
                    <div class="form-group"><label>结束时间</label> <input type="date" id="end-time-ipt" placeholder="请输入结束时间"
                            class="form-control"></div>
                    <div class="form-group"><label>目标</label> <input type="text" id="flag-ipt" placeholder="请输入计划目标"
                            class="form-control" maxlength="25" minlength="1"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="del_plane()">删除</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="edit_plane()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>



    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>


    <script src="js/jquery-ui.custom.min.js"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <!-- Full Calendar -->
    <script src="js/plugins/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="js/host.js"></script>

    <script>
        var event = [];
        var plane_id = null;
        //var today_plane = false;
        function date_toString(date) {
            var now_d = date.getDate();
            var now_m = date.getMonth();
            now_m = now_m + 1
            if (now_m == 13) {
                now_m = 1;
            }
            var now_y = date.getFullYear();
            return now_y + "-" + now_m + "-" + now_d;
        }

        function add_plane() {
            var date = new Date();
            var end_date = new Date();
            end_date.setDate(end_date.getDate() + 1);
            // if(today_plane==true){
            //     alert("今天已经添加");
            //     return;
            // }
            plane_txt = $("#plane_txt").val();
            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeAdd",
                data: '{ "flag": "' + plane_txt + '","status":0,"start_time":"' + date_toString(date) + '","end_time":"' + date_toString(end_date) + '"}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        $("#external-events").empty();
                        html = "<div class='external-event navy-bg'>" + plane_txt + "</div>";
                        $("#external-events").html(html);
                        //today_plane = true;
                        plane_list();
                    }
                }
            });
        }

        function edit_plane(id) {
            start_time = $('#start-time-ipt').val();
            end_time = $('#end-time-ipt').val();
            flag = $("#flag-ipt").val();
            if (start_time == null || end_time == null || flag == null) {
                alert("你的什么东西不够长");
            }
            var date1 = new Date(start_time)
            var date2 = new Date(end_time)

            if (date1.getTime() < date2.getTime()) {
                alert("想时光倒流？这个系统帮不了你");
                return;
            }


            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeAdd",
                data: '{ "flag": "' + flag + '","status":0,"start_time":"' + start_time + '","end_time":"' + end_time + '"}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        alert("编辑成功");
                    } else {
                        alert("编辑失败");
                    }
                }
            });
        }

        function del_plane(id) {
            plane_txt = $("#plane_txt").val();
            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeAdd",
                data: '{ "id": ' + plane_id + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        data = data["response_data"]
                        alert("删除成功");
                    } else {
                        alert("删除失败")
                    }
                }
            });
        }

        function calendar_init(data) {
            $('#calendar').empty();
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'month,'
                },
                selectable: false,
                editable: false,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function (date, allDay) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);

                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }

                },
                events: event,
            });
        }

        function edit_plane_init(id) {
            $("edit-plane").modal('show');
            plane_id = id;
            plane_txt = $("#plane_txt").val();
            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeInfo",
                data: '{ "id": ' + plane_id + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        $('#start-time-ipt').val(data["start_time"]);
                        $('#end-time-ipt').val(data["end_time"]);
                        $("#flag-ipt").val(data["flag"]);
                    }
                }
            });
        }

        function plane_list() {
            var date = new Date();
            var now_d = date.getDate();
            var now_m = date.getMonth() + 1;
            if (now_m == 13) {
                now_m = 1;
            }
            var now_y = date.getFullYear();
            var today_plane = [];
            var today_plane_id = [];
            $.ajax({
                type: "POST",
                url: localhost + "/plane/planeList",
                data: '{ "page": 1,"size":30}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        event = []
                        $.each(data["response_data"]["data"], function (commentIndex, comment) {
                            var arr = comment["start_time"].split("-");
                            var d = parseInt(arr[2]);
                            var m = parseInt(arr[1]);
                            var y = parseInt(arr[0]);
                            event.push({
                                title: comment["flag"],
                                start: new Date(y, m - 1, d)
                            });

                            if (now_m == m && now_d == d && now_y == y) {
                                today_plane.push([comment["flag"], comment["id"]]);
                            }
                        });
                        calendar_init(date);
                        $("#external-events").empty();
                        var event_html = ""
                        $.each(today_plane, function (commentIndex, comment) {
                            event_html += '<div class="external-event navy-bg" data-toggle="modal" data-target="#edit-plane" onclick="edit_plane_init(' + comment[1] + ')">' + comment[0] + '</div>';
                        });
                        $("#external-events").html(event_html);
                    }
                }

            });
        }

        $(document).ready(function () {

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            /* initialize the external events
             -----------------------------------------------------------------*/

            $('#external-events div.external-event').each(function () {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true, // will cause the event to go back to its
                    revertDuration: 0 //  original position after the drag
                });

            });



            /* initialize the calendar
             -----------------------------------------------------------------*/
            plane_list();





        });
    </script>



</body>

</html>